<template>
  <div class="content">
    <!-- index -->
    <div class="index bg-green">
      <!-- say hellpo -->
      <div class="hello">
        <h1>hello,I'm xxxxx</h1>
      </div>
      <!-- card  -->
      <div class="indexContent">
        <div class="card">
          <div class="cardL">
            <i class="dot">●</i>
          </div>
          <div class="cardR">
            <div>
              <p>罗文</p><span>LUO WEN</span>
            </div>
          </div>
        </div>
        <div class="img">
          <img src="~static/images/workspace.png" alt="workspace" />
        </div>
      </div>
    </div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
    <div class="pink"></div>
  </div>
</template>

<style scoped>
.content {
  width: 100%;
  height: 100%;
}
.bg-green {
  width: 100%;
  height: 100%;
  background-color: #1fac75;
}
.index {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.index h1 {
  font-size: 0.520833rem;
}
.indexContent {
  display: flex;
}
.indexContent .card {
  margin: 0.520833rem 0.625rem 0 0;
  width: 2.804167rem;
  height: 1.145833rem;
  background: linear-gradient(135deg, transparent 15px, rgba(0, 0, 0, 0.2) 0);
}
.card .cardL {
  float: left;
  position: relative;
  height: 100%;
  border-right: 1px dashed #1fac75;
  width: .416667rem;
}
.cardL .dot{
  position: absolute;
  top: 0;
  left: .125rem;
  font-size: .15rem;
  color: #1fac75;
  text-shadow: -1px -1px 1px rgba(0,0,0,.2);
}
.card .cardR{
  float: left;
}
.blue {
  width: 100%;
  height: 100%;
  background-color: blue;
}
.green {
  width: 100%;
  height: 100%;
  background-color: green;
}
.yellow {
  width: 100%;
  height: 100%;
  background-color: yellow;
}
.pink {
  width: 100%;
  height: 100%;
  background-color: pink;
}
.text {
  width: 0.416667rem;
  height: 0.416667rem;
  background-color: #bbbbbb;
}
</style>